<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchRules="searchRules"
      :inline="false"
    >
      <div slot="upload">
        <el-upload
          class="upload-demo"
          name="file"
          :action="action"
          :headers="headers"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :limit="1"
          :on-exceed="handleExceed"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            {{ res.type == 2 || res.type == 4 ? "" : "只能上传apk文件" }}
          </div>
        </el-upload>
      </div>
    </r-search>

    <!--      <r-table-->
    <!--        :isPagination="true"-->
    <!--        :isHandle="false"-->
    <!--        :tableData="tableData"-->
    <!--        :tableCols="tableCols"-->
    <!--        :tablePage="pagination"-->
    <!--        :loading="tableLoading"-->
    <!--        :isSelection="false"-->
    <!--        @refresh="page()"-->
    <!--      />-->
  </div>
</template>

<script>
export default {
  name: "Fresh_cabinet",
  data() {
    return {
      type: "",
      fileList: [],
      searchData: {
        versionName: "",
        apk_version: "",
        apk_address_url: "",
        deviceNos: "",
        id: ""
      },
      searchForm: [
        {
          type: "input",
          label: "版本Name",
          placeholder: "版本Name",
          prop: "versionName",
          width: 200
        },
        {
          type: "select",
          label: "Device Number",
          placeholder: "Device Number",
          prop: "deviceNos",
          multiple: true,
          width: 200,
          options: []
        },
        {
          type: "input",
          label: "版本号",
          placeholder: "版本号",
          prop: "apk_version",
          width: 200
        },
        {
          type: "input",
          label: "Download地址",
          isDisabled: () => {
            return true;
          },
          placeholder: "",
          prop: "apk_address_url",
          width: 600
        },
        {
          type: "slot",
          label: "上传APK",
          name: "upload",
          placeholder: "上传APK",
          prop: "apk_address_url",
          width: 200
        }
      ],
      searchHandle: [
        {
          label: "更新",
          type: "primary",
          handle: e => this.submit()
        }
      ],
      searchRules: {
        versionName: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        apk_version: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        apk_address_url: [
          { required: true, message: "Please Upload", trigger: "blur" }
        ],
        deviceNos: [
          { required: true, message: "Please Select", trigger: "blur" }
        ]
      },

      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "ID", prop: "id" },
        { label: "版本号", prop: "versionName" },
        { label: "Operations人", prop: "updateBy" },
        { label: "Operation Time", prop: "createTime" },
        { label: "地址", prop: "appUrl" }
      ],
      pagination: { limit: 10, offset: 1, total: 1 }
    };
  },
  computed: {
    action() {
      return this.$http.adornUrl("common/upload");
    },
    headers() {
      return {
        // Authorization:sessionStorage.token
      };
    }
  },
  props: ["res"],
  mounted() {
    this.getData();
    this.device_list();
  },
  methods: {
    async device_list() {
      var res = await this.apis.device_list({
        pageNum: 1,
        pageSize: 10000,
        deviceType: this.res.deviceType
      });
      let list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          label: res.deviceName,
          value: res.deviceNo
        });
      });

      this.searchForm[
        this.labIndex2(this.searchForm, "deviceNos")
      ].options = options;
    },
    async getData() {
      var res = await this.apis.appVersion_list({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
        type: this.res.type
      });
      var list = res.rows || [];
      let data = list[0];

      this.searchData = {
        versionName: data.versionName,
        apk_version: data.appVersion,
        apk_address_url: data.appUrl,
        deviceNos: data.deviceNos,
        id: data.id
      };
    },
    async submit() {
      if (!this.searchData.apk_version) {
        this.$message({
          message: "请填写版本号",
          type: "error"
        });
        return;
      } else if (!this.searchData.apk_address_url) {
        this.$message({
          message: "Please UploadAPK",
          type: "error"
        });
        return;
      }

      var res = await this.apis.appVersion_updata({
        appVersion: this.searchData.apk_version,
        versionName: this.searchData.versionName,
        deviceNos: this.searchData.deviceNos.join(","),
        type: this.res.type,
        appUrl: this.searchData.apk_address_url,
        id: this.searchData.id
      });

      this.getData();

      this.fileList = [];

      this.$message({
        message: "Operations Success",
        type: "success"
      });
    },
    page() {
      this.getData();
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `Current限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleAvatarSuccess(res, file) {
      this.searchData.apk_address_url = res.fileName;
    },
    beforeAvatarUpload(file) {
      if (this.res.type == 2 || this.res.type == 4) {
        return true;
      }
      const isJPG = file.type === "application/vnd.android.package-archive";
      // const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传文件只能是 .apk 文件!");
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG;
    }
  }
};
</script>

<style scoped lang="scss"></style>
